<template>
	<div class="library_analysis" v-loading="loading">
		<div class="data">
			<dl>
				<dt>已使用空间/配额总量：</dt>
				<dd>{{ usedQuota | sizeFilter }}/{{ totalQuota | sizeFilter }}</dd>
			</dl>
			<el-progress v-bind="progressOption" :percentage="quotaPercentage"></el-progress>
		</div>
		<div class="chart"></div>
	</div>
</template>

<script>
import { queryLibrarySetting } from '@/api/data/tbNetDiskDir';
export default {
	props: {
		libraryId: { type: String, default: '' }
	},
	data() {
		return {
			loading: false,
			detailData: {},
			progressOption: {
				// textInside: true,
				// textColor: '#fff',
				strokeWidth: 20,
				color: [
					{ color: '#5cb87a', percentage: 60 },
					{ color: '#e6a23c', percentage: 75 },
					{ color: '#f56c6c', percentage: 90 },
					{ color: '#ff0000', percentage: 100 }
				]
			}
		};
	},
	computed: {
		totalQuota() {
			return Number(this.detailData.diskQuota || '0') * 1024 * 1024;
		},
		usedQuota() {
			return Number(this.detailData.diskUseQuota || '0');
		},
		quotaPercentage() {
			if (this.totalQuota === 0) {
				return 0;
			} else {
				return Math.round((this.usedQuota / this.totalQuota) * 10000) / 100;
			}
		}
	},
	watch: {
		libraryId: {
			handler() {
				this.loading = true;
				this.getLibraryDetail();
			},
			immediate: true
		}
	},
	methods: {
		//获取资源库详情
		async getLibraryDetail() {
			let result = await queryLibrarySetting(this.libraryId).then((res) => res.data);
			this.loading = false;
			if (result.code === '0') {
				this.detailData = this.$detailData(result.data);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.library_analysis::v-deep {
	flex: 1;
	overflow: hidden;
	.data {
		padding: 16px;
		border-bottom: solid 1px #e4e7ed;
		dl {
			display: flex;
			align-items: center;
			font-size: 16px;
			line-height: 1;
		}
		dt {
			color: #606266;
		}
		dd {
			color: #303133;
		}
	}
	.el-progress {
		display: flex;
		align-items: center;
		margin-top: 16px;
	}
	.el-progress-bar {
		margin: 0;
		padding: 0;
	}
	.el-progress__text {
		font-size: 14px !important;
		flex-shrink: 0;
		white-space: nowrap;
	}
}
</style>
